<template>
  <div class="EChartsBox">
    <div class="title">出租房屋管理平台</div>
    <div class="v-flex charts-inner">
      <!-- 流动人口入住情况 -->
      <chart-state />

      <!-- 辖区流动人口数量统计 -->
      <div class="boxEcharts">
        <div class="boxtitle">辖区流动人口数量统计</div>
        <div class="framework">
          <div class="itembox">
            <div class="itemone">
              本市流动人口 <span class="textnum">1589</span>人
            </div>
            <div class="itemone" style="line-height: 10px">
              外省流动人口 <span class="textnum">1589</span>人
            </div>
            <div class="itemone">
              涉(疆、藏、蒙)流动人口 <span class="textnum">1589</span>人
            </div>
          </div>
          <div id="chartPie" class="pie-chart"></div>
          <div id="breadpie" class="pie-bread"></div>
        </div>
      </div>

      <!-- 门锁开启状态 -->
      <div class="boxEcharts">
        <div class="boxtitle">门锁开启状态</div>
        <div class="category">
          <div class="name">姓名</div>
          <div class="name" style="margin-left: 34px">身份证</div>
          <div class="name" style="margin-left: 82px">电话号码</div>
          <div class="name" style="margin-left: 30px">开锁地址</div>
          <div class="name" style="margin-left: 56px">状态</div>
        </div>
        <div
          class="information"
          v-for="(item, index) in information"
          :key="index"
        >
          <div class="informationitem">{{ item.name }}</div>
          <div class="informationitem">{{ item.IDcard }}</div>
          <div class="informationitem">{{ item.phone }}</div>
          <div class="informationitem">{{ item.address }}</div>
          <div class="informationitem">{{ item.type }}</div>
        </div>
      </div>

      <!-- 异常入住预警 -->
      <div class="boxEcharts">
        <div class="boxtitle">异常入住预警</div>
        <div
          class="abnormal"
          :style="
            item.type == 1
              ? 'background-color: rgba(255,215,0,0.1);color:rgba(255,215,0)'
              : item.type == 2
              ? 'background-color: rgba(250,128,114,0.1);color:rgba(250,128,114)'
              : item.type == 3
              ? 'background-color: rgba(46,139,87,0.1);color:rgba(46,139,87)'
              : item.type == 4
              ? 'background-color: rgba(0,255,255,0.1);color:rgba(0,255,255)'
              : item.type == 5
              ? 'background-color: rgba(0,0,205,0.1);color:rgba(0,0,205)'
              : item.type == 6
              ? 'background-color: rgba(255,0,255,0.1);color:rgba(255,0,255)'
              : item.type == 7
              ? 'background-color: rgba(0,255,0,0.1);color:rgba(0,255,0)'
              : item.type == 8
              ? 'background-color: rgba(255,140,0,0.1);color:rgba(255,140,0)'
              : 'background-color: rgba(148,0,211,0.1);color:rgba(148,0,211)'
          "
          v-for="(item, index) in abnormal"
          :key="index"
        >
          <div class="warning">{{ item.warning }}</div>
          <div class="reason">{{ item.reason }}</div>
          <div class="where">{{ item.where }}</div>
        </div>
      </div>

      <!-- 辖区流动人口租住比例 -->
      <div class="boxEcharts">
        <div class="boxtitle">辖区流动人口租住比例</div>
        <div id="map" style="width: 100%; height: 236px"></div>
      </div>

      <!-- 流动人口重点社区 -->
      <div class="keyframebox">
        <div class="keyframeName">流动人口重点社区</div>
        <div class="keyframeValue">重庆花园坝花园小区</div>
      </div>

      <!-- 门锁异常预警 -->
      <div class="boxEcharts">
        <div class="boxtitle">门锁异常预警</div>
        <div
          class="information"
          style="height: 23px"
          v-for="(item, index) in Abnormalrecords"
          :key="index"
        >
          <img class="recordimg" :src="item.img" />
          <div class="recordsreason">{{ item.reason }}</div>
          <div class="recordstime">{{ item.time }}</div>
          <div class="recordsaddress">{{ item.address }}</div>
        </div>
      </div>

      <!-- 辖区内出租房屋情况统计 -->
      <div class="boxEcharts">
        <div class="boxtitle">辖区内出租房屋情况统计</div>
        <div class="category Ncolor">
          <div class="name">辖区出租屋数量统计</div>
          <div class="name" style="margin-left: 34px">辖区出租屋租赁状态</div>
          <div class="name" style="margin-left: 44px">违规租房房东</div>
        </div>
        <div style="display: flex; position: relative; top: 30px">
          <div
            id="pieEchart"
            :style="{ width: '140px', height: '160px' }"
          ></div>
          <div id="chartPie" class="pie-wrap"></div>
          <div
            id="iceEchart"
            :style="{ width: '140px', height: '160px' }"
          ></div>
          <div
            style="
              display: flex;
              flex-direction: column;
              position: absolute;
              top: -20px;
              right: 10px;
            "
          >
            <div
              class="illegal"
              v-for="(item, index) in illegalList"
              :key="index"
            >
              <!-- <img class="Therimg" src="../../assets/Thering.png" alt="" /> -->
              <img class="Therimg" src="" alt="" />
              <div class="illegalkey">{{ item.key }}</div>
              <div class="illegalvalue">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 辖区流动人口前科人员比例 -->
      <div class="boxEcharts">
        <div style="top: 20px; font-size: 13px" class="boxtitle">
          辖区流动人口前科人员比例
        </div>
        <div
          id="recordEchart"
          :style="{ width: '100%;', height: '100px' }"
        ></div>
        <div
          id="pie1"
          style="position: absolute; top: 0; width: 100%; height: 240px"
        ></div>
        <div
          id="centerEchart"
          style="position: absolute; top: 0; width: 100%; height: 150px"
        ></div>
      </div>

      <!-- 辖区流动人口数 -->
      <div class="boxEcharts">
        <div style="top: 20px; font-size: 13px" class="boxtitle">
          辖区流动人口数
        </div>
        <div class="populationBox">
          <div
            class="population"
            v-for="(item, index) in populationList"
            :key="index"
          >
            <div class="square"></div>
            <div class="populationkey">{{ item.key }}</div>
            <div class="populationvalue" style="color: #f0e68c">
              {{ item.value }}<span style="color: rgba(69, 150, 150)">人</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ChartState from "@/components/chart/ChartState.vue";

export default {
  name: "LargeScreenChart",
  components: {
    ChartState,
  },
  data() {
    return {
      chartPie: null,
      breadpie: null,
      illegalList: [
        { key: "Li商务中心1栋", value: "魂淡呀" },
        { key: "Li商务中心1栋", value: "魂淡呀" },
        { key: "Li商务中心1栋", value: "魂淡呀" },
        { key: "Li商务中心1栋", value: "魂淡呀" },
      ],
      information: [
        {
          name: "魂淡呀",
          IDcard: 341800199805221314,
          phone: 12345678910,
          address: "Li商务中心1栋",
          type: "进门",
        },
        {
          name: "魂淡呀",
          IDcard: 341800199805221314,
          phone: 12345678910,
          address: "Li商务中心1栋",
          type: "进门",
        },
        {
          name: "魂淡呀",
          IDcard: 341800199805221314,
          phone: 12345678910,
          address: "Li商务中心1栋",
          type: "进门",
        },
        {
          name: "魂淡呀",
          IDcard: 341800199805221314,
          phone: 12345678910,
          address: "Li商务中心1栋",
          type: "进门",
        },
        {
          name: "魂淡呀",
          IDcard: 341800199805221314,
          phone: 12345678910,
          address: "Li商务中心1栋",
          type: "进门",
        },
      ],
      abnormal: [
        {
          warning: "红色预警",
          reason: "外籍人士来访",
          where: "重庆沙坪坝花园小区三单元12-15",
          type: 1,
        },
        {
          warning: "红色预警",
          reason: "吸、贩毒人员来访",
          where: "重庆沙坪坝花园小区三单元12-15",
          type: 2,
        },
        {
          warning: "红色预警",
          reason: "前科人员来访",
          where: "重庆沙坪坝花园小区三单元12-15",
          type: 3,
        },
        {
          warning: "红色预警",
          reason: "涉疆涉藏人员入住",
          where: "重庆沙坪坝花园小区三单元12-15",
          type: 4,
        },
        {
          warning: "红色预警",
          reason: "信访重点人员入住",
          where: "重庆沙坪坝花园小区三单元12-15",
          type: 5,
        },
        {
          warning: "红色预警",
          reason: "极端人员入住",
          where: "重庆沙坪坝花园小区三单元12-15",
          type: 6,
        },
        {
          warning: "红色预警",
          reason: "在网逃犯来访",
          where: "重庆沙坪坝花园小区三单元12-15",
          type: 7,
        },
      ],
      Abnormalrecords: [
        {
          // img: require("../../assets/damage.png"),
          img: "",
          reason: "门锁被破坏预警",
          time: "2021-03-03 19:25",
          address: "重庆沙坪坝花园小区三单元12-15",
        },
        {
          // img: require("../../assets/error.png"),
          img: "",
          reason: "门锁错误过多预警",
          time: "2021-03-03 19:25",
          address: "重庆沙坪坝花园小区三单元12-15",
        },
        {
          // img: require("../../assets/damage.png"),
          img: "",
          reason: "门锁规律性使用预警",
          time: "2021-03-03 19:25",
          address: "重庆沙坪坝花园小区三单元12-15",
        },
        {
          // img: require("../../assets/damage.png"),
          img: "",
          reason: "大门敞开不关预警",
          time: "2021-03-03 19:25",
          address: "重庆沙坪坝花园小区三单元12-15",
        },
        {
          // img: require("../../assets/damage.png"),
          img: "",
          reason: "频繁更换入住人预警",
          time: "2021-03-03 19:25",
          address: "重庆沙坪坝花园小区三单元12-15",
        },
        {
          // img: require("../../assets/damage.png"),
          img: "",
          reason: "异常租住预警",
          time: "2021-03-03 19:25",
          address: "重庆沙坪坝花园小区三单元12-15",
        },
        {
          // img: require("../../assets/damage.png"),
          img: "",
          reason: "大数据挖掘预警",
          time: "2021-03-03 19:25",
          address: "重庆沙坪坝花园小区三单元12-15",
        },
      ],
      populationList: [
        { key: "2020-08-10", value: 2020001 },
        { key: "2020-08-10", value: 2020001 },
        { key: "2020-08-10", value: 2020001 },
      ],
    };
  },
  mounted() {
    this.maxrecordEcharts();
    this.bread();
    this.Brokenline();
    this.breadCenter();
    this.numberfigure();
    this.typefigure();
    this.minrecord();
    this.record();
  },
  methods: {
    record() {
      var recordEchart = this.$echarts.init(
        document.getElementById("centerEchart")
      );
      recordEchart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "40%",
          // orient: 'vertical',//设置为竖向注释
          icon: "pin",
          right: "right",
          itemHeight: 1, // 设置高度
          itemGap: 3, // 设置间距
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 10,
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "50%"], //设置粗细和半径
            avoidLabelOverlap: false,
            center: ["40%", "60%"], //调整饼图位置
            itemStyle: {
              borderRadius: 10,
              borderColor: "rgba(23,22,28)",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: ["#20C1C6", "rgba(255,165,0)"],
            data: [
              { value: 1000, name: "前科人员" },
              { value: 200, name: "正常居民" },
            ],
          },
        ],
      });
    },
    minrecord() {
      var recordEchart = this.$echarts.init(
        document.getElementById("recordEchart")
      );
      recordEchart.setOption({
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["45%", "40%"], //设置粗细和半径
            avoidLabelOverlap: false,
            center: ["40%", "70%"], //调整饼图位置
            itemStyle: {
              borderRadius: 10,
              borderColor: "rgba(23,22,28)",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: ["#20C1C6", "rgba(23,22,28)"],
            data: [{ value: 1000 }, { value: 200 }],
          },
        ],
      });
    },
    maxrecordEcharts() {
      var maxrecord = this.$echarts.init(document.getElementById("pie1"));
      maxrecord.setOption({
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["42%", "40%"], //设置粗细和半径
            avoidLabelOverlap: false,
            center: ["40%", "38%"], //调整饼图位置
            itemStyle: {
              borderRadius: 10,
              borderColor: "rgba(23,22,28)",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: ["#20C1C6", "rgba(23,22,28)"],
            data: [{ value: 1000 }, { value: 200 }],
          },
        ],
      });
    },
    numberfigure() {
      var pieEchart = this.$echarts.init(document.getElementById("pieEchart"));
      pieEchart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          textStyle: {
            fontWeight: "normal",
            fontSize: 10,
            color: ["#9FE080", "#5C7BD9"],
          },
          left: "left",
          top: "70%",
          itemGap: 10,
          itemHeight: 10, //设置高度
          itemWidth: 10, //设置宽度
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            center: ["55%", "30%"], //调整饼图位置
            itemStyle: {
              borderRadius: 10,
              borderColor: "black",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 12, //文字的字体大小
                },
                formatter: "{d}%",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: ["#9FE080", "#5C7BD9"],
            data: [
              { value: 1048, name: "二房东转租" },
              { value: 735, name: "房东直租" },
            ],
          },
        ],
      });
    },
    getPie() {
      var myChart = this.$echarts.init(document.getElementById("box"));
      myChart.setOption({
        title: {
          text: "生鲜销量统计",
        },
        //工具箱
        //保存图片
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
            },
          },
        },
        //图例-每一条数据的名字叫销量
        legend: {
          data: ["销量"],
        },
        //x轴
        xAxis: {
          data: ["苹果", "橘子", "橙子", "香蕉", "菠萝", "榴莲"],
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis: {},
        //数据-data是最终要显示的数据
        series: [
          {
            name: "销量",
            type: "line",
            data: [40, 20, 35, 60, 55, 10],
          },
        ],
      });
    },
    typefigure() {
      var iceEchart = this.$echarts.init(document.getElementById("iceEchart"));
      iceEchart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          textStyle: {
            fontWeight: "normal",
            fontSize: 10,
            color: ["#9FE080", "#5C7BD9"],
          },
          left: "left",
          top: "70%",
          itemGap: 10,
          itemHeight: 10,
          itemWidth: 10,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            center: ["45%", "30%"], //调整饼图位置
            itemStyle: {
              borderRadius: 10,
              borderColor: "black",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 10, //文字的字体大小
                },
                formatter: "{d}%",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: ["#FF7070", "#73C0DE", "#FFDC60"],
            data: [
              { value: 1048, name: "空闲" },
              { value: 735, name: "已租" },
              { value: 735, name: "居用" },
            ],
          },
        ],
      });
    },
    Brokenline() {
      var myChart = this.$echarts.init(document.getElementById("map"));
      myChart.setOption({
        //鼠标移动到上面时会有提示
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["同比", "环比"],
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ["line", "bar"] },
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            show: true, //网格线是否显示
            lineStyle: {
              color: ["#7B68EE"],
              width: 0.2,
              type: "solid",
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "rgba(123,104,238,0.5)", //左边线的颜色
              width: "1", //坐标线的宽度
            },
          },
          data: [
            "2021.01",
            "2021.02",
            "2021.03",
            "2021.04",
            "2021.05",
            "2021.06",
            "2021.07",
            "2021.08",
            "2021.09",
            "2021.10",
            "2021.11",
            "2021.12",
          ],
          axisLabel: {
            //隔多少个显示
            interval: 0,
            rotate: 45, //倾斜度 -90 至 90 默认为0
            // 距离横坐标位置
            margin: 6,
            textStyle: {
              fontWeight: "bolder",
              color: "#459696",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true, //网格线是否显示
            lineStyle: {
              color: ["#7B68EE"],
              width: 0.2,
              type: "solid",
            },
          },
          min: -10,
          max: 15,
          axisLabel: {
            textStyle: {
              color: "#459696",
            },
            interval: "auto", //居中显示
            length: 5,
            formatter: "{value} %", //以百分比显示
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "rgba(123,104,238,0.5)", //左边线的颜色
              width: "1", //坐标线的宽度
            },
          },
          boundaryGap: false,
          data: [-10, -5, 0, 5, 10, 15],
        },
        series: [
          {
            name: "同比",
            type: "line",
            data: [7, 5, 8, 0, 4, 1, 5, 12, 1, -3, 0, 4],
            itemStyle: {
              normal: {
                color: "#D3DE95", //改变折线点的颜色
                lineStyle: {
                  color: "#D3DE95", //改变折线颜色
                },
              },
            },
          },
          {
            name: "环比",
            type: "line",
            areaStyle: {
              normal: {
                color: "rgba(38,142,192,0.3)", //改变区域颜色
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(38,142,192)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(38,142,192)", //改变折线颜色
                },
              },
            },
            data: [-1, 1, 3, 2, 2, 6, 7, 6, 4, 1, 2, 3],
          },
        ],
      });
    },
    breadCenter() {
      this.breadpie = this.$echarts.init(
        document.getElementById("breadpie"),
        "macarons"
      );
      this.breadpie.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          // orient: 'vertical',//设置为竖向注释
          icon: "pin",
          right: "right",
          itemHeight: 1, // 设置高度
          itemGap: 3, // 设置间距
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 8,
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["30%", "50%"],
            data: [
              { value: 270, name: "男性" },
              { value: 310, name: "女性" },
            ],
            //排序
            // .sort(function (a, b) {
            //   return a.value - b.value;
            // })
            // roseType: "radius",
            // 设置字体颜色
            label: {
              color: "rgba(255, 255, 255, 0)",
            },
            labelLine: {
              //设置线条颜色
              lineStyle: {
                color: "rgba(255, 255, 255, 0)",
              },
              // 设置线条弯度
              smooth: 0.2,
              // 设置线条高度
              length: 10,
              // 设置线条长度
              length2: 20,
            },
            color: ["#FED85D", "#8179E9"],
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: () => Math.random() * 200,
          },
        ],
      });
    },
    bread() {
      this.chartPie = this.$echarts.init(
        document.getElementById("chartPie"),
        "macarons"
      );
      this.chartPie.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          icon: "pin",
          right: "right",
          itemHeight: 1, // 设置高度
          itemGap: 3, // 设置间距
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 8,
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["30%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "10",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 2, name: "0-6岁" },
              { value: 2, name: "7-18岁" },
              { value: 4, name: "18-45岁" },
              { value: 8, name: "46-69岁" },
              { value: 16, name: ">69岁" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style>
.framework {
  display: flex;
}
.pie-chart {
  width: 40%;
  height: 100px;
}
.pie-bread {
  width: 28%;
  height: 100px;
}
.EChartsBox {
  height: 100%;
  width: 100%;
  background: #17161c;
  overflow: hidden;
}
.charts-inner {
  height: 100%;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: auto;
  padding-bottom: 100px;
}
.title {
  color: #b9e0f2;
  text-align: center;
  position: relative;
  top: 10px;
  font-size: 30px;
  margin-bottom: 15px;
}

.itembox {
  width: 42%;
  height: 100%;
  display: flex;
  color: #459696;
  flex-direction: column;
}
.itemone {
  height: 20%;
  line-height: 47px;
  position: relative;
  top: 6px;
  text-align: right;
}
.textnum {
  color: #fed85d;
}
.category {
  display: flex;
  top: 10px;
  position: relative;
}
.name {
  margin-left: 24px;
}
.information {
  display: flex;
  top: 12px;
  position: relative;
  height: 26px;
  align-items: center;
}
.abnormal {
  height: 30px;
  display: flex;
  align-items: center;
}
.informationitem {
  flex: 1;
}
.warning {
  background: #e60410;
  width: 60px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  border-radius: 4px;
  position: relative;
  left: 20px;
}
.reason {
  position: relative;
  left: 60px;
}
.where {
  position: absolute;
  right: 20px;
}
.keyframebox {
  width: 500px;
  height: 50px;
  background: linear-gradient(to bottom, #17161c, #103a5b);
  position: relative;
  display: flex;
  top: 29px;
  /* left: 500px; */
}
.keyframeName {
  color: #459696;
  font-size: 14px;
  line-height: 50px;
  position: relative;
  left: 30px;
}
.keyframeValue {
  color: #9a555a;
  font-size: 14px;
  line-height: 50px;
  position: relative;
  left: 60px;
}
.recordsreason {
  color: #459696;
  position: relative;
  margin-left: 20px;
}
.recordstime {
  position: absolute;
  text-align: left;
  left: 210px;
  color: #459696;
}
.recordsaddress {
  position: absolute;
  color: #459696;
  text-align: left;
  left: 326px;
}
.recordimg {
  width: 20px;
  position: relative;
  left: 20px;
  height: 20px;
}
.Ncolor {
  color: #459696;
}
.illegal {
  width: 186px;
  display: flex;
  height: 26px;
  line-height: 26px;
  align-items: center;
  padding-left: 6px;
  margin-top: 10px;
  border-radius: 20px;
  background: linear-gradient(to right, #b72018, #17161c);
}
.Therimg {
  width: 16px;
  height: 16px;
  position: relative;
  margin-right: 4px;
}
.illegalvalue {
  position: absolute;
  right: 10px;
}
.populationBox {
  width: 100%;
  height: 76%;
  top: 20px;
  font-size: 16px;
  color: rgba(69, 150, 150);
  position: relative;
  display: flex;
  background: rgba(69, 150, 150, 0.2);
  flex-direction: column;
}
.population {
  height: 34px;
  width: 100%;
  align-items: center;
  line-height: 40px;
  display: flex;
}
.populationkey {
  margin-left: 20px;
}
.populationvalue {
  margin-left: 40px;
}
.square {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(69, 150, 150);
  position: relative;
  left: 15px;
  transform: rotate(45deg);
}
</style>